<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>榜单详情</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="goBack"
                >返回
                </el-button>
            </div>
            <div>
                <el-form ref="searchForm" :inline="true" label-suffix="" label-width="100px"
                         label-position="left" size="small">
                    <el-row>
                        <el-col>
                            <el-form-item>
                                <el-button type="success" @click="syncData">同步数据</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-descriptions title="" direction="vertical" :column="4" border size="small">
                <el-descriptions-item label="榜单">
                    {{ rankDetail.rankName }}
                </el-descriptions-item>
                <el-descriptions-item label="榜单Key">
                    {{ rankDetail.rankKey }}
                </el-descriptions-item>
                <el-descriptions-item label="最近同步日期">
                    {{ rankDetail.syncDate }}
                </el-descriptions-item>
                <el-descriptions-item label="是否自动同步">
                    {{ rankDetail.syncStatus }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-divider></el-divider>
        <dp-rank-shop ref="dpRankShop" :rank-id="id"></dp-rank-shop>
    </div>
</template>

<script>
import {getDpRankById, syncDpRank} from "@/api/api";
import DpRankShop from "@/component/DpRankShop";

export default {
    name: "DpRankDetail",
    components: {DpRankShop},
    data() {
        return {
            rankDetail: {},
            id: '',
        }
    },
    methods: {
        syncData: function () {
            syncDpRank({id: this.rankDetail.id}).then(data => {
                if (data.respCode == 1000) {
                    this.$message({
                        type: 'success',
                        message: '同步成功!'
                    });
                    this.getData();
                    this.$refs.dpRankShop.getData();
                }
            })
        },
        // 获取企业数据
        getData: function () {
            getDpRankById({"id": this.id}).then(data => {
                this.rankDetail = data.body;
            });
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.id = this.$route.query.id;
        this.getData();
    },
}
</script>

<style scoped>

</style>
